import { useState, useEffect, useCallback } from "react";
import { request } from '../../../../common/request';
import { urls } from '../../../../common/urls';
import "./index.less";

function Notcie() {
  const [list, setList]: any = useState([]);
  const getList = () => {
    request({
      method: "post",
      data: {
        method: urls.noticeList,
      },
    }).then((res: any) => {
      setList(res.data.data);
    });
  };
  const checkNoticeMsg = (id: string, status: number) => {
    request({
      method: "post",
      data: {
        method: urls.checkNotice,
        id,
        status
      },
    }).then((res: any) => {
      getList();
    });
  }
  useEffect(() => {
    getList();
  }, [])

  return (
    <div className="notice-content">
      {
        list.length && list.map((x: any) => {
          return (
            <div className="link-item" key={x.id}>
              <div className="notice-card">
                <img
                  className="notice-card-avatar"
                  src={x.avatar}
                  alt=""
                />
                <div className="notice-card-name">
                  <p>{x.username}</p>
                  <p>{x.desc}</p>
                </div>
              </div>
              <div>
                {x.status === 0 && <div className="notice-btn-group">
                  <div className="notice-btn-group-reject" onClick={() => checkNoticeMsg(x.id, -1)}>拒绝</div>
                  <div className="notice-btn-group-agree" onClick={() => checkNoticeMsg(x.id, 1)}>同意</div>
                </div>}
                {x.status === 1 && <div className="notice-text">已同意</div>}
                {x.status === 2 && <div className="notice-text">已拒绝</div>}
              </div>
            </div>
          );
        })
      }
    </div>
  );
}

export default Notcie;
